<template>
  <!-- 科技人员库管理 -->
  <base-breadcrumb>
    <searchData
      :searchData="searchArr"
      @search="search"
    ></searchData>
      <!-- <title-name :title="$route.meta.title"></title-name> -->
    <a-row
      :gutter="10"
      class="page-height"
    >
      <!-- 树搜索 -->
      <a-col :span="4">
        <a-card class="page-height-tree tree-container">
          <!-- 公司组织树搜索 -->
          <tree-organization
            ref="treeOrganization"
            @loader="search"
            :autoSelect="false"
            :selectedKeys.sync="selectedKeys"
            :selectOptions.sync="selectOptions"
            :istakeOutHight="true"
            style="max-height: 570px;overflow: auto"
          ></tree-organization>
        </a-card>
      </a-col>
      <a-col :span="20" class="page-height-list-wrapper">
        <a-card
          :bordered="false"
          class="page-height-list"
        >
          <!-- 操作栏 -->
          <!--                    <div class="mb12"></div>-->
          <!-- 统计选中项 -->
          <!-- <a-alert :showIcon="true" class="mb12">
                        <template slot="message">
                            <span style="margin-right: 12px">
                                已选择:
                                <a>
                                    <b>{{ selectedRowKeys.length }}</b>
                                </a>
                                项
                            </span>
                        </template>
                    </a-alert> -->
          <!-- 表格 -->
          <list-table
            ref="table"
            class="export-table"
            :columns="columns"
            :start-index="0"
            @select-click="(e) => (selectedRowKeys = e.keys)"
            :request="loadData"
            :statistics-config="{ use: true, statistics, temp }"
            :export-permission="{ select: 'stm_001_exp_05', all: 'stm_001_expall_06' }"
            :export-config="{
                            use: true,
                            select: $route.meta.title,
                            all: $route.meta.title,
                            customColumns
                        }"
          >
            <template slot="prefix">
              <a-button
                v-btnPermission="'stm_001_add_01'"
                icon="plus"
                :loading="addLoading"
                class="btn_right"
                type="primary"
                @click="addperson"
              >添加人员</a-button>
              <a-button
                v-btnPermission="'stm_001_delall_02'"
                :disabled="selectedRowKeys.length < 1"
                icon="delete"
                type="danger"
                @click="handleRemoveMore"
              >移除</a-button>
            </template>
            <a-alert
              class="mb12"
              type="info"
              show-icon
            >
              <template slot="message">
                <span>
                  工程计量确权(不含税)( 万元)：
                  <!-- <a>{{ from.confirmationRights }}</a> -->
                </span>
                <a-divider type="vertical" />
                <span>
                  截止目前项目实际产值(不含税)(万元)：
                  <!-- <a>{{ from.projectActOutPutValueSoFars }}</a> -->
                </span>
                <a-divider type="vertical" />
              </template>
            </a-alert>
            <!-- 表格行操作栏 -->
            <span
              slot="action"
              slot-scope="text, record"
            >
              <template>
                <a
                  v-btnPermission="'stm_001_loo_03'"
                  @click="handleManage(record)"
                >查看</a>
                <a-divider
                  v-btnPermission="'stm_001_del_04'"
                  type="vertical"
                />
                <a
                  v-btnPermission="'stm_001_del_04'"
                  @click="
                                        result = record
                                        visibleResult = true
                                    "
                >移除</a>
              </template>
            </span>
            <a-list
              slot="expandedRowRender"
              slot-scope="record"
              item-layout="horizontal"
              :data-source="formatItem(record)"
            >
              <a-list-item
                slot="renderItem"
                slot-scope="item"
              >
                <div>{{ item }}</div>
              </a-list-item>
            </a-list>
          </list-table>
        </a-card>
      </a-col>
    </a-row>
    <!-- 表单弹窗 -->

    <SelectPerson
      ref="dialogEdit"
      headerTitle="添加科技人员"
      :form="{ whether: false }"
      :unRepeatPerson="false"
      @confirm="submitForm"
    ></SelectPerson>
    <!-- <dialog-edit
      ref="dialogEdit"
      :visible.sync="visible"
      :api="apiEdit"
      headerTitle="添加科技人员"
      loadList="getEmployeeList"
      :editModel="editModel"
      :form="{ whether: false }"
      @confirm="submitForm"
    ></dialog-edit> -->
    <!-- 移除提示框 -->
    <result
      :visible.sync="visibleResult"
      :form="form"
    >
      <template #title>
        <p style="color: #000">警告提示</p>
      </template>
      <template #subTitle>
        <p style="color: #000">是否确认将此员工从科技人员库中移除</p>
      </template>
      <template #extra>
        <a-button
          :loading="loading"
          @click="handleRemove"
          type="danger"
        >移除</a-button>
        <a-button
          @click="visibleResult = false"
          type="primary"
        >取消</a-button>
      </template>
    </result>
  </base-breadcrumb>
</template>

<script>
// import SelectPerson from '@/views/science/activityManage/activity/components/selectPerson.vue'
import SelectPerson from '@/components/BComponents/BSelectPerson'
// import dialogEdit from '@/views/quality/securityPerson/employees/dialogEdit.vue' // 表单弹窗
import { STable } from '@/components' // 表格
import { getEmployeeList, deleteSciences, addSciencesList, getExpertListcount } from '@/api/science'
import { getOrgsTree, getStaff } from '@/api/subassembly/TreeSelectOrganization' // api
import TreeOrganization from '@/components/businessComponents/TreeOrganization' // 树
import Result from '@/components/Dialog/Result' // 提示
const searchArr = [
  // 搜索框
  {
    name: '员工名称',
    value: 'employeeName',
    type: 'input'
  },
  {
    name: '员工编号',
    value: 'employeeNo',
    type: 'input'
  },
  {
    name: '状态',
    value: 'status',
    type: 'select',
    data: [
      {
        value: '0',
        label: '离职'
      },
      {
        value: '1',
        label: '在职'
      }
    ]
  },
  {
    name: '电话号码',
    value: 'phone',
    type: 'input'
  },
  {
    name: '职务',
    value: 'post',
    type: 'input'
  },
  {
    name: '职称',
    value: 'title',
    type: 'input'
  },
  {
    name: '单位',
    value: 'unit',
    type: 'input'
  },
  {
    name: '学历',
    value: 'education',
    type: 'input'
  },
  {
    name: '年龄段',
    value: 'age',
    type: 'rangeInput',
    setInitValue: true,
    attr: {
      rangeFormat: ['ageStart', 'ageEnd'],
      min: 0,
      max: 100,
      precision: 0
    }
  }
]
const columns = [
  {
    title: '员工名称',
    ellipsis: true,
    width: '120px',
    dataIndex: 'employeeName'
  },
  {
    title: '员工编号',
    ellipsis: true,
    width: '120px',
    dataIndex: 'employeeNo'
  },
  {
    title: '性别',
    width: '80px',
    dataIndex: 'gender'
  },
  {
    title: '电话号码',
    ellipsis: true,
    dataIndex: 'phone',
    width: '120px'
  },
  {
    title: '职务',
    ellipsis: true,
    width: '150px',
    dataIndex: 'post'
  },
  {
    title: '单位',
    ellipsis: true,
    width: '150px',
    dataIndex: 'unit'
  },
  {
    title: '状态',
    minWidth: '70px',
    dataIndex: 'status'
  },
  {
    title: '最高学历',
    dataIndex: 'firstEducation',
    ellipsis: true,
    minWidth: '90px'
  },
  {
    title: '年龄',
    minWidth: '70px',
    dataIndex: 'age'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'a' + Date.now(),
  components: {
    STable,
    TreeOrganization,
    Result,
    SelectPerson
  },
  computed: {
    orgQuery() {
      return {
        baseOrgType: 0, // 是否基础组织 0否 1是
        containVirtual: 0 //是否包含虚拟组织 0包含 1 不包含
      }
    },
    // 树节点api
    api() {
      return { getOrgsTree }
    },
    // 非安全人员api
    apiEdit() {
      return { getEmployeeList }
    },
    // 表格列表请求参数
    args() {
      let args = this.queryParam
      // 添加树节点id
      if (this.selectedKeys[0]) {
        args.subItemId = this.selectedKeys[0]
      }
      return args
    }
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      loading: false,
      addLoading: false,
      visibleResult: false,
      // 操作类型：0 添加 1 编辑 3 查看
      editModel: 0,
      // 责任区域弹窗控件
      visible: false,
      selectedRowKeys: [], // 表格选项
      selectedKeys: [], // 选中节点
      selectOptions: {}, // 选中节点对象
      // 弹窗参数
      form: null,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      totalSize: 10,
      allList: [],
      loadData: (parameter) => {
        let that = this
        const requestParameters = Object.assign({}, parameter, that.args)
        this.getExpertListcount(requestParameters)
        return getEmployeeList(requestParameters).then((res) => {
          that.totalSize = res.totalSize
          // if (that.selectedRowKeys.length > 0) {
          //     that.$refs.table.clearSelected()
          // }
          return res
        })
      },

      selectedId: [],
      result: {}, // 查看参数对象
      boxHeight: 0, // 盒子高度
      personIds: [],
      customColumns: [
        { title: '员工名称', dataIndex: 'employeeName' },
        { title: '员工编号', dataIndex: 'employeeNo' },
        { title: '性別', dataIndex: 'gender' },
        { title: '电话号码', dataIndex: 'phone' },
        { title: '职务', dataIndex: 'post' },
        { title: '单位', dataIndex: 'unit' },
        { title: '状态', dataIndex: 'status' },
        { title: '最高学历', dataIndex: 'firstEducation' },
        { title: '年龄', dataIndex: 'age' },
        { title: '生日', dataIndex: 'birthday' },
        { title: '身份证', dataIndex: 'card' },
        { title: '职称', dataIndex: 'title' }
      ],
      temp: () => {
        return (
          <span style="margin-right: 12px">
            共计：<span class="totalNum">{this.statistics.totalNum || 0} 个 </span> | 正高级职称：
            <span class="totalNum">{this.statistics.highSeniorNum || 0} 个</span> | 高级职称：
            <span class="totalNum">{this.statistics.highNum || 0} 个</span> | 中级职称：
            <span class="totalNum">{this.statistics.middleNum || 0} 个</span> | 博士：
            <span class="totalNum">{this.statistics.doctorNum || 0} 个</span> | 硕士研究生：
            <span class="totalNum">{this.statistics.masterNum || 0} 个</span> | 大学本科：
            <span class="totalNum">{this.statistics.degreeNum || 0} 个</span>
          </span>
        )
      },
      statistics: {} // 统计
    }
  },
  mounted() {
    // 获取分项工程
    this.$refs.treeOrganization.getList()
  },
  methods: {
    selectClick(e, id) {
      console.log(id)
    },
    addperson() {
      // this.visible = true;
      // return
      this.addLoading = true
      getEmployeeList({
        pageNo: 1,
        pageSize: 5000
      })
        .then((res) => {
          // console.log(res)
          if (res.code == 200) {
            this.addLoading = false
            // this.allList = res.data;
            this.visible = true
            let list = res.data.map((v) => {
              return { id: v.employeeId, name: v.employeeName, orgId: v.orgId }
            })
            list = list.filter((v) => v.orgId !== null)
            this.$refs.dialogEdit.open(list)
          }
        })
        .catch(() => {
          this.addLoading = false
        })
    },
    getExpertListcount(params) {
      getExpertListcount(params).then((res) => {
        this.statistics = res.data
      })
    },
    // 过滤表
    formatItem(e) {
      let datas = []
      let title = { birthday: '生日：', title: '职称：', card: '身份证：', education: '学历：' }
      for (let index in e) {
        let item = e[index]
        for (let i in title) {
          if (i == index) {
            datas.push(title[i] + (e[index] || '暂无'))
          }
        }
      }
      return datas
    },
    // 挂载后设置树的高度
    // autoHeight() {
    //   this.$nextTick(() => {
    //     let height = this.$refs.table.$el.getBoundingClientRect().top // 盒子离窗口上边距
    //     this.boxHeight = `calc(100vh - ${height + 68}px`
    //   })
    // },
    // 头部搜索
    search(value) {
      // 赋值表单
      if (value) {
        this.queryParam = value
        if (this.queryParam.ageStart != undefined || this.queryParam.ageEnd != undefined) {
          if (this.queryParam.ageStart == undefined || this.queryParam.ageEnd == undefined) {
            this.$message.warn('请输入正确的年龄段')
            return
          }
        }
        if (this.queryParam.ageStart != undefined && this.queryParam.ageEnd != undefined) {
          this.queryParam.age = this.queryParam.ageStart + ',' + this.queryParam.ageEnd
          delete this.queryParam.ageStart
          delete this.queryParam.ageEnd
        }
      }
      this.$refs.table.refresh(true)
    },
    // 提交表单
    submitForm(e) {
      const list = e.map((v) => {
        v.subItemId = v.orgId
        v.post = v.postPNames.join('、')
        return v
      })
      let that = this
      that.$confirm({
        title: '提示',
        content: '确认添加？',
        okText: '提交',
        cancelText: '关闭',
        onOk() {
          return addSciencesList(list).then((res) => {
            if (res.code == 200 || res.data.code == 200) {
              that.$message.success('添加成功！')
              // that.$refs.dialogEdit.search()
              that.search()
              // that.visible = false
            }
          })
        }
      })
    },
    // 移除表格选中项
    handleRemoveMore() {
      // 若有选中项
      this.result = {}
      this.visibleResult = true
    },
    // 提交移除表单
    handleRemove() {
      let that = this
      let result = that.result // 点击的行对象
      let ids = '' // 请求参数
      // 配置请求参数，单个或者多选
      if (result.id) {
        ids = result.id
      } else {
        ids = that.selectedRowKeys.join(',')
      }
      // 按钮加载中，防止重复提交
      that.loading = true
      // 提交移除表单
      deleteSciences({ id: ids })
        .then((res) => {
          // 按钮加载结束
          that.loading = false
          if (res.code == 200 || res.data.code == 200) {
            that.$message.success('移除成功！')
            // 重置列表
            this.$refs.table.getData(null, true)
            that.visibleResult = false
            // 关闭提示弹窗
          }
        })
        .catch((res) => {
          that.loading = false
        })
    },
    // 查看
    handleManage(b) {
      this.$router.push({ path: '/science/employer/detail', query: { id: b.employeeId } })
      // this.$router.push({
      //   name: 'expertEdit',
      //   params: b,
      // })
    }
  }
}
</script>
<style lang="less">
.export-table .ant-table-fixed-right .ant-table-expanded-row {
  height: 156px;
}
.tree-container .takeOutHight{
  max-height: 100% !important;
  &::-webkit-scrollbar {
    background: #fff;
    width: 8px;
    height: 8px;
    // display: none;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    width: 8px;
    border-radius: 8px;
    border: 1px #fff solid;
    background: #ccc;
  }
}
</style>

